<template>
  <div class="account">
    <header class="title">个人账户</header>
    <p class="personalaccount">净资产： {{ incomeMoney - expenseMoney }}元</p>
    <p class="personalaccount">
      <span>总收入：{{ incomeMoney }}元</span>
      <span>|</span>
      <span>总支出： {{ expenseMoney }}元</span>
    </p>
    <section class="add_account">
      <el-button
        class="add_account_button"
        type="danger"
        icon="el-icon-plus"
        @click="addAccount"
        >添加账户</el-button
      >
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tallyData: this.$store.getters.getTallyData,
      expenseMoney: 0, //支出总金额
      incomeMoney: 0, // 收入总金额
    }
  },
  methods: {
    // 初始化收入和支出总金额
    initMoney() {
      this.tallyData.forEach((item) => {
        if (item.type === 0) {
          this.expenseMoney += Number(item.price)
        } else {
          this.incomeMoney += Number(item.price)
        }
      })
    },
    addAccount() {},
  },
  mounted() {
    this.initMoney()
  },
}
</script>

<style lang="scss" scoped>
.account {
  .title {
    padding: 18px;
    text-align: center;
    background-color: #28fc79;
    color: #fff;
  }
  .personalaccount {
    padding: 8px 10px;
    text-align: center;
    width: 100vw;
    background-color: #28fc79;
    color: #fff;
    :nth-of-type(2) {
      margin: 0 20px;
    }
  }
  .add_account {
    display: flex;
    align-items: center;
    .add_account_button {
      flex: 1;
    }
  }
}
</style>
